:root{
  --bg:#07111f;
  --panel:#0d1b2a;
  --line:#1f3b57;
  --text:#e9f2ff;
  --muted:#9fb2c8;
  --accent:#39ffb6;
  --danger:#ff5f6d;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(circle at top,#102843 0,#07111f 48%,#040912 100%);
  color:var(--text);
  min-height:100vh;
}
.wrap{width:min(980px,92%);margin:0 auto;padding:64px 0}
.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:54px}
.brand{font-weight:800;letter-spacing:.08em}
.badge{border:1px solid var(--line);padding:7px 11px;border-radius:999px;color:var(--accent);font-size:.82rem}
.hero,.card{
  background:rgba(13,27,42,.9);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
}
.hero{padding:42px}
h1{font-size:clamp(2rem,6vw,4.6rem);line-height:1;margin:0 0 18px}
h2{margin-top:0}
p{color:var(--muted);line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px}
.card{padding:24px}
a{color:var(--accent)}
.btn{
  display:inline-block;padding:12px 17px;border-radius:10px;background:var(--accent);
  color:#03130d;text-decoration:none;font-weight:800;border:0;cursor:pointer
}
.btn.secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.meta{font-size:.88rem;color:var(--muted)}
input{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line);
  background:#07111f;color:var(--text);margin:7px 0 16px
}
label{font-weight:700}
.alert{padding:13px 15px;border-radius:10px;margin:16px 0}
.alert.error{border:1px solid #7a2c35;background:#2c1115;color:#ffc5ca}
.alert.ok{border:1px solid #1d6b50;background:#0b2d22;color:#baffdf}
code{background:#06101c;padding:2px 6px;border-radius:6px}
footer{margin-top:40px;color:#71879f;font-size:.85rem}